<template>
    <div class="contact-us">
        <header>
            <span></span>
            <h2>联系我们</h2>
            <p>www.xmfinger.com</p>
        </header>
        <div class="qr-code">
            <div>
                <img src="../../../assets/img/qr-code.jpg" alt="">
            </div>
            <p>扫码关注指尖互动</p>
        </div>
        <div class="contact-information">
            <div class="business">
                <div>
                    <h3><i></i>商务合作</h3>
                    <p>钟先生</p>
                    <div>
                        <div class="phone">
                            <span></span>
                            <a href="tel:13806036507">13806036507</a>
                        </div>
                        <div class="QQ">
                            <span></span>
                            <a href="http://wpa.qq.com/msgrd?v=3&uin=2770020&site=qq&menu=yes">2770020</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="channel">
                <div>
                    <h3><i></i>渠道合作</h3>
                    <p>朱女士</p>
                    <div>
                        <div class="phone">
                            <span></span>
                            <a href="tel:13959193414">13959193414</a>
                        </div>
                        <div class="QQ">
                            <span></span>
                            <a href="http://wpa.qq.com/msgrd?v=3&uin=526302576&site=qq&menu=yes">526302576</a>
                        </div> 
                    </div>
                </div>
            </div>
            <div class="address">
                <div>
                    <h3 class="address-title"><i></i>公司地址</h3>
                    <p>厦门市软件<br/>园3期A区01<br/>栋1301单元</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'ContactUs',
    data () {
        return {

        }
    }
}
</script>
<style scoped>
.contact-us {
    margin-top: 100px;
    text-align: center;
}
.contact-us header span {
    width: 55px;
    height: 39px;
    background: url("../../../assets/img/down.png") no-repeat;
    background-size: 55px 39px;
    display: inline-block;
}
.contact-us header h2 {
    font-size: 48px;
    color: #1e90ff;
    margin-top: 20px;
}
.contact-us header p {
    margin-top: 20px;
    font-size: 24px; /*px*/
    color: #708090;
}
.contact-us .qr-code {
    margin-top: 40px;
    text-align: center;
}
.contact-us .qr-code div {
    width: 291px;
    height:290px;
    display: inline-block;
}
.contact-us .qr-code div img {
    width: 100%;
    height: auto;
}
.contact-us .qr-code p {
    font-size: 24px; /*px*/
    color: #708090;
    margin-top: 18px;
}
.contact-us .contact-information {
    width: 710px;
    margin: 0 auto;
    margin-top: 60px;
    display: flex;
}
.contact-us .contact-information .business,.contact-us .contact-information .channel {
    display: inline-block;
    height: 156px;
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
}
.contact-us .contact-information .channel {
    flex: 2;
}
.contact-us .contact-information .business div h3,.contact-us .contact-information .channel div h3 {
    font-size: 30px;
    color: #1e90ff;
    text-align: left;
    position: relative;
}
.contact-us .contact-information .business div h3 i,.contact-us .contact-information .channel div h3 i {
    display: inline-block;
    border-bottom: 3px solid #1e90ff;
    width: 63px;
    position: absolute;
    top: 35px;
    left: 0;
}
.contact-us .contact-information .channel div i {
    left: 90px;
}
.contact-us .contact-information .business div p,.contact-us .contact-information .channel div p {
    font-size: 24px; /*px*/
    color: #05173b;
    margin-top: 20px;
    text-align: left;
}
.contact-us .contact-information .business div div,.contact-us .contact-information .channel div div {
    margin-top: 20px;
    line-height: 0;
}
.contact-us .contact-information .business div div .phone span,.contact-us .contact-information .channel div div .phone span {
    background: url("../../../assets/img/dianhua.png") no-repeat;
    background-size: 18px 19px;
    display: inline-block;
    width: 18px;
    height: 19px;
}
.contact-us .contact-information .channel div div .phone span {
    width: 19px;
    height: 19px;
    background-size: 19px 19px;
}
.contact-us .contact-information .business div div a,.contact-us .contact-information .channel div div a {
    text-decoration: none;
    font-size: 24px; /*px*/
    color: #05173b;
    display: inline-block;
    padding-top: 8px;
}
.contact-us .contact-information .business div div .phone,.contact-us .contact-information .channel div div .phone {
    display: flex;
}
.contact-us .contact-information .business div div .QQ,.contact-us .contact-information .channel div div .QQ {
    text-align: left;
}
.contact-us .contact-information .business div div .QQ span,.contact-us .contact-information .channel div div .QQ span {
    background: url("../../../assets/img/qie.png") no-repeat;
    background-size: 18px 19px;
    display: inline-block;
    width: 18px;
    height: 19px;
}
.contact-us .contact-information .channel div div .QQ span {
    background-size: 19px 19px;
    width: 19px;
}
.contact-us .contact-information .business div div .QQ a,.contact-us .contact-information .channel div div .QQ a {
    margin-left: -6px;
}
.contact-us .contact-information .address {
    /* width: 198px; */
    display: inline-block;
    /* margin-left: 22px; */
    /* min-height: 1.52rem; */
    vertical-align: top;
    height: 156px;
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
}
.contact-us .contact-information .address .address-title {
    font-size: 30px; /*px*/
    color: #1e90ff;
    position: relative;
    text-align: left;
    position: relative;
}
.contact-us .contact-information .address .address-title i {
    display: block;
    height: 32px;
    width: 63px;
    position: absolute;
    top: 23px;
    left: 0px;
    background-color: #1e90ff;
    background: url("../../../assets/img/horizontal-line.png") no-repeat;
    background-size: 63px 32px;
}
.contact-us .contact-information .address p {
    font-size: 24px; /*px*/
    color: #05173b;
    margin-top: 55px;
    text-align: left;
}
@media screen and (max-width: 414px) and (min-width: 411px) {
.contact-us .contact-information .business p,.contact-us .contact-information .channel p {
    margin-top: 25px;
}
}
</style>
